<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
		<title>home</title>
	</head>
	<body>
		<div class="content">
			<h1>Home serve</h1>
			<div class="iconBox">
				<!-- <a target="_blank" href="http://local.serv:9000/">
					<img src="images/icon/docker.png"></br><b>Portainer</b>
				</a> -->
			</div>
			<footer>
				<p class="copyRight">kui © CopyRight 2022 <a id="nw">外网</a></p>
			</footer>
		</div>
		<div class="svgBg">
			<svg version="1.1" height="70%" xmlns="http://www.w3.org/2000/svg" class="wave">
				<defs></defs>
				<path id="wave_1" d="" />
			</svg>
			<svg version="1.1" height="60%" xmlns="http://www.w3.org/2000/svg" class="wave">
				<defs></defs>
				<path id="wave_2" d="" />
			</svg>
			<svg version="1.1" height="50%" xmlns="http://www.w3.org/2000/svg" class="wave">
				<defs></defs>
				<path id="wave_3" d="" />
			</svg>
			<svg version="1.1" height="40%" xmlns="http://www.w3.org/2000/svg" class="wave">
				<defs></defs>
				<path id="wave_4" d="" />
			</svg>
			<svg version="1.1" height="50%" xmlns="http://www.w3.org/2000/svg" class="wave">
				<defs></defs>
				<path id="wave_5" d="" />
			</svg>
		</div>
		<!-- <mask></mask> -->
	</body>
</html>
<script type="text/javascript" src="js/TweenMax.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/wavify.js"></script>
<script type="text/javascript" src="js/jquery.wavify.js"></script>
<script type="text/javascript">
	var wave1 = $('#wave_1').wavify({
		height: 200,
		bones: 10,
		amplitude: 100,
		color: 'rgba(131, 138, 45, .2)',	// 更换波浪颜色，最后的.2是透明度，可以不用改
		speed: .1
	});

	var wave2 = $('#wave_2').wavify({
		height: 150,
		bones: 8,
		amplitude: 80,
		color: 'rgba(131, 138, 45, .2)',	// 更换波浪颜色，最后的.2是透明度，可以不用改
		speed: .15
	});

	var wave3 = $('#wave_3').wavify({
		height: 100,
		bones: 6,
		amplitude: 60,
		color: 'rgba(131, 138, 45, .2)',	// 更换波浪颜色，最后的.2是透明度，可以不用改
		speed: .2
	});

	var wave4 = $('#wave_4').wavify({
		height: 150,
		bones: 8,
		amplitude: 80,
		color: 'rgba(131, 138, 45, .2)',	// 更换波浪颜色，最后的.2是透明度，可以不用改
		speed: .25
	});

	var wave5 = $('#wave_5').wavify({
		height: 200,
		bones: 10,
		amplitude: 100,
		color: 'rgba(131, 138, 45, .2)',	// 更换波浪颜色，最后的.2是透明度，可以不用改
		speed: .2
	});
</script>
<script type="text/javascript">
const applist = [
	{
		label: "面板",
		urlIn: "http://192.168.1.18:32774",
		urlOut: "http://42.193.21.214:20033",
		icon: "images/icon/1panel.png",
	},
	{
		label: "同步",
		urlIn: "http://192.168.1.18:8886",
		icon: "images/icon/handbrake.png",
	},
	{
		label: "影音",
		urlIn: "http://192.168.1.18:8096/web/index.html#",
		urlOut: "http://42.193.21.214:18096/web/index.html#",
		icon: "images/icon/jellyfin.png"
	},
	{
		label: "git",
		urlIn: "http://42.193.21.214:13000",
		urlOut: "http://42.193.21.214:13000",
		icon: "images/icon/gogs.png"
	},
	{
		label: "书屋",
		urlIn: "http://192.168.1.18:8083",
		urlOut: "http://42.193.21.214:18083",
		icon: "images/icon/ebook.png",
	},
	{
		label: "听书",
		urlIn: "http://192.168.1.18:13378",
		urlOut: "http://42.193.21.214:13378",
		icon: "images/icon/abooks.png", 
	},
	{
		label: "网盘",
		urlIn: "http://192.168.1.18:81/my-libs/",
		urlOut: "http://42.193.21.214:81/my-libs/",
		icon: "images/icon/yunpan.png",
	},
	{
		label: "下载",
		urlIn: "http://sleele.gitee.io/ariang/",
		urlOut: "http://sleele.gitee.io/ariang/",
		icon: "images/icon/down.svg",
	},
	{
		label: "网盘聚合",
		urlIn: "http://192.168.1.18:5678/",
		icon: "images/icon/alist.svg",
	},
	{
		label: "监控",
		urlIn: "http://192.168.1.18:3001/",
		urlOut: "http://42.193.21.214:83/",
		icon: "images/icon/dash.png",
	},
	{
		label: "nocoDB",
		urlIn: "http://192.168.1.18:88/",
		urlOut: "http://42.193.21.214:20030/",
		icon: "images/icon/nocodb.png",
	}
]

function render(list, isInner=true){
	$(".iconBox").empty()
	for (const one of list) {
		let url = isInner ? one.urlIn: one.urlOut
		if(url) {
			$(".iconBox").append('<a target="_blank" href="'+url+'"><img src="'+one.icon+'"></br><b>'+one.label+'</b></a>')
		}
	}
	$("#nw").text(isInner? "内网": "外网")
}
const InHealth = 'http://192.168.1.18:8765/ready'
let isInner = true
$(document).ready(function(){
	$.ajax({
		type:"get",
		url: InHealth,
		timeout: 1000,
		success: function (res) {
			isInner = true
			render(applist, isInner)
		},
		error: function (err) {
			isInner = false
			render(applist, isInner)
		}
	})
	$("#nw").click(function(){
		isInner = !isInner
		render(applist, isInner)
	})
})
</script>